<template>
	<view class="content ">
		<view class="msgDetailC" :class="showLoading?'hidePage':''">
			<view class="msg-detail">
				<view class="detail-title font36">
					{{showList.title}}
				</view>
				<view class="detail-time">
					{{showList.created_at}}
				</view>
				<view class="detail-cont">
					<image :src="showList.cover" mode="widthFix"></image>
					<rich-text :nodes="showList.content"></rich-text>
				</view>
			</view>
		</view>
		<lzLoading :showloading='showLoading'></lzLoading>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				showLoading: true,
				showList: [], //消息列表
			}
		},
		onLoad(options) {
			this.mid = options.id
		},
		onShow() {
			Promise.all([this.getMessagesDetail()]).then((t) => {
				let sett = setTimeout(() => {
					this.showLoading = false
				}, 1000)
			})
		},
		methods: {
			repairRichText(html) {
				console.log(html, 45)
				// 去掉<img>中style /width / height属性
				let newContent = html.replace(/<img[^>]*>/gi, (match) => {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
			 	match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
					match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '') // 去除 style=""这样的属性
					return match
				})
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi, (match) => {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;')
					return match
				})
			 // 去掉所有<br/>标签
			 newContent = newContent.replace(/<br[^>]*\/>/gi, '')
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
				)
				return newContent;
			},
			//获取公告详情
			getMessagesDetail() {
				return new Promise((resolve, reject) => {
					this.$api.getMessagesDetail({
						id: this.mid
					}, true, (res) => {
						res.notice.created_at = this.$util.formatTime(res.notice.created_at, 'Y年M月D日')
						res.notice.content = this.repairRichText(res.notice.content)
						this.showList = res.notice
						resolve("success")
					})
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.msgDetailC {
		letter-spacing: 2rpx;
		transition: all .3s;

		.msg-detail {
			padding: 0 4%;
			padding-top: 20rpx;

			.detail-title {
				font-weight: bold;
				color: #454545;
				padding: 20rpx 0;
			}

			.detail-time {
				color: #787878;
				margin-bottom: 30rpx;
			}

			.detail-cont {
				color: #454545;
				line-height: 42rpx;
				font-size: 28rpx;
				width: 100%;
				box-sizing: border-box;

				img {
					width: 100%;
					margin-bottom: 10rpx;
				}

				image {
					width: 100%;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>
